<!-- 我的-优惠券 -->
<script setup>
	import {
		ref,
		reactive,
		nextTick
	} from 'vue'
	import {
		onShow,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		qryCanUseApi
	} from '@/api/components/SelectCoupon.js'


	// 数据
	const data = reactive({
		list: [],
		value: '',
		pageNo: 1, // 当前页码
		pageSize: 10, // 每页数量
		totalPages: 10, // 总页数
		status: 'loadmore',
	})

	const status = ref(3)
	const qryMyCpnList = ref()
	const qryCanUseList = () => {
		qryCanUseApi({
			pageSize: data.pageSize,
			pageNum: data.pageNo,
			// status=''是查询全部卡券,展示全部卡券不做
			status: status.value
		}).then(res => {
			// data.list = res.data
			console.log('res', res);

			const list = res.data
			const total = res.total
			console.log('res.total: ', res.total);
			// const { list, total } = res.data
			data.totalPages = Math.ceil(total / data.pageSize)
			data.pageNo === 1 ? data.list = list : data.list = [...data.list, ...list]
			data.pageNo++;
			data.status = data.pageNo >= data.totalPages ? 'nomore' : 'loadmore'
		})
	}
	onLoad(() => {
		qryCanUseList()
	})
	onReachBottom(() => {
		if (data.status !== 'loadmore') return
		qryCanUseList()
	})


	// 点击tab栏
	const click = (item) => {
		console.log('item:====', item);
		// nextTick(() => {
		status.value = item.id
		// })
		// this.$set(status.value, item.id);
		console.log('status.value', status.value);
		data.pageNo = 1
		qryCanUseList()
	}


	const current = ref()

	// 创建响应式数据
	const list1 = reactive([{
			name: '未使用',
			id: 3,
		},
		{
			name: '已使用',
			id: 4,
		},
		{
			name: '已过期',
			id: 5,
		}
	]);
</script>

<template>
	<view class="my-coupon-page">
		<view class="tabs-box">
			<up-tabs :list="list1" :current="current" lineWidth="40" lineColor=" #19d325" :activeStyle="{
			    color: '#303133',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
			    color: '#606266',
			    transform: 'scale(1)'
			}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="click"></up-tabs>
		</view>
		<view class="list">
			<view v-for="(item,index) in data.list" :key="index" class="item">
				<view class="left">
					<!-- <image style="width: 108rpx; height: 110rpx;"
						:src="`/static/images/icons/${status===3?'coupon' : 'fullDiscount'}.png`"
						mode="scaleToFill" /> -->

					<image style="width: 89rpx; height: 79rpx;" src="/static/images/icons/coupon.png" mode="scaleToFill"
						v-if="status===3" />
					<image style="width: 89rpx; height: 79rpx;" src="/static/images/icons/fullDiscount.png"
						mode="scaleToFill" v-else />
					<view class="info">
						<view class="name">{{item.cpnName}}</view>
						<view class="time">有效期至：{{item.insEndTime}}</view>
					</view>
				</view>
				<view class="line">

				</view>
				<view class="amount-box">
					<view class="amount">
						<text class="label">￥</text>
						<text class="value">{{item.disAmount}}</text>
					</view>
					<view class="tip">(满{{item.minAmount}}元可用)</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.my-coupon-page {
		background: #F6F6F6;
		min-height: 100vh;


		.tabs-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			top: 0;
			left: 0;
			padding: 12rpx 32rpx;
			z-index: 9;
			width: 100vw;
			height: 88rpx;
			background: #FFFFFF;
		}



		& .list {
			padding: 44rpx;
			// padding: 28rpx 32rpx;
			margin-top: 88rpx;

			& .item {
				margin-bottom: 34rpx;
				position: relative;
				display: flex;
				align-items: center;
				background: #FFFFFF;
				border-radius: 12rpx;
				overflow: hidden;

				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					width: 12rpx;
					height: 138rpx;
					// background: linear-gradient(180deg, #23E72C 0%, #303133 100%);
				}

				& .left {
					margin-left: 32rpx;
					width: 482rpx;
					display: flex;
					align-items: center;

					& .info {
						margin-left: 12rpx;

						& .name {
							font-weight: 500;
							font-size: 28rpx;
							color: #303133;
						}

						& .time {
							margin-top: 4rpx;
							font-weight: 400;
							font-size: 20rpx;
							color: #838385;
						}
					}
				}

				& .line {
					position: relative;
					margin: 0 14rpx;
					height: 138rpx;
					width: 4rpx;
					background-image: linear-gradient(to bottom,
							#E0E0E0 0%,
							#E0E0E0 50%,
							transparent 50%);
					background-size: 4rpx 20rpx; //第一个值（40rpx）越大线条越长间隙越大
					background-repeat: repeat-y;
					opacity: 1;

					&::before {
						content: '';
						position: absolute;
						left: -13rpx;
						top: -13rpx;
						width: 26rpx;
						height: 26rpx;
						border-radius: 50%;
						background: #F6F6F6;
					}

					&::after {
						content: '';
						position: absolute;

						left: -13rpx;
						bottom: -13rpx;
						width: 26rpx;
						height: 26rpx;
						border-radius: 50%;
						background: #F6F6F6;
					}
				}

				& .amount-box {
					width: 180rpx;
					text-align: center;

					& .amount {
						& .label {
							font-weight: 500;
							font-size: 32rpx;
							background: linear-gradient(90deg, #21FF2B 0%, #303133 100%);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						& .value {
							font-weight: 600;
							font-size: 56rpx;
							background: linear-gradient(90deg, #21FF2B 0%, #303133 100%);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}

					& .tip {
						font-weight: 400;
						font-size: 20rpx;
						color: #838385;
					}
				}
			}
		}
	}
</style>